<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <script type="text/javascript" src="js/respond.min.js"></script>
    <script type="text/javascript" src="js/PIE_IE678.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="css/H-ui.css"/>
    <link type="text/css" rel="stylesheet" href="css/H-ui.admin.css"/>
    <link type="text/css" rel="stylesheet" href="font/font-awesome.min.css"/>
    <!--[if IE 7]>
    <link href="font/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--bootstrap-->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/bootstrap/css/bootstrap.min.css"/>
    <!--bootstrap-toastr-->
    <script type="text/javascript" src="/js/toastr/toastr.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/toastr/toastr.css"/>
    <script type="text/javascript" src="/layer/layer.min.js"></script>
    <!--    <script type="text/javascript" src="/js/jquery.min.js"></script>-->
    <script type="text/javascript" src="/js/pagenav.cn.js"></script>
    <script type="text/javascript" src="/js/H-ui.js"></script>
    <script type="text/javascript" src="/js/H-ui.admin.js"></script>
    <title>管理员列表</title>
</head>

<body>
<nav class="Hui-breadcrumb"><i class="icon-home"></i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span
        class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r mr-20"
                                               style="line-height:1.6em;margin-top:3px"
                                               href="javascript:location.replace(location.href);" title="刷新"><i
        class="icon-refresh"></i></a></nav>
<div class="pd-20">
    <div class="text-c">
        <form class="Huiform" method="post" action="" target="_self">
            <input type="text" id="username" placeholder="帐号" autocomplete="off" value="" class="input-text">
            <!--            <input type="password" placeholder="密码" autocomplete="off" value="" class="input-text">-->
            <!--            <input type="password" placeholder="确认密码" autocomplete="off" value="" class="input-text">-->
            <select class="select" name="admin-role" size="1" id="roleId">
                <option th:each="role : ${roleList}" th:value="${role.id}">[[${role.name}]]</option>
            </select>
            <button type="button" class="btn btn-success" id="" name="" onClick="admin_add();"><i
                    class="icon-plus"></i> 添加
            </button>
        </form>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l"><a href="javascript:;" onClick="datadel()" class="btn btn-danger radius"><i
                class="icon-trash"></i> 批量删除</a></span>
        <span class="r">共有数据：<strong>54</strong> 条</span>
    </div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="7">员工列表</th>
        </tr>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="" value=""></th>
            <th width="40">ID</th>
            <th width="150">登录名</th>
            <!--            <th>角色</th>-->
            <!--            <th width="130">加入时间</th>-->
            <!--            <th width="100">是否已启用</th>-->
            <th width="70">操作</th>
        </tr>
        </thead>
        <tbody id="admin_info">
        <!--        <tr class="text-c">-->
        <!--            <td><input type="checkbox" value="1" name=""></td>-->
        <!--            <td>1</td>-->
        <!--            <td>admin</td>-->
        <!--            <td>超级管理员</td>-->
        <!--            <td>2014-6-11 11:11:42</td>-->
        <!--            <td class="admin-status"><span class="label label-success">已启用</span></td>-->
        <!--            <td class="f-14 admin-manage"><a style="text-decoration:none" onClick="admin_stop(this,'10001')"-->
        <!--                                             href="javascript:;" title="停用"><i class="icon-hand-down"></i></a> <a-->
        <!--                    title="编辑" href="javascript:;" onClick="admin_edit('4','400','310','角色编辑','admin-edit.html')"-->
        <!--                    class="ml-5" style="text-decoration:none"><i class="icon-edit"></i></a> <a title="删除"-->
        <!--                                                                                               href="javascript:;"-->
        <!--                                                                                               onClick="admin_del(this,'1')"-->
        <!--                                                                                               class="ml-5"-->
        <!--                                                                                               style="text-decoration:none"><i-->
        <!--                    class="icon-trash"></i></a></td>-->
        <!--        </tr>-->
        </tbody>
    </table>
</div>


</body>
<script>
    $(function () {
        getAdmin();
    })

    function getAdmin() {
        $.ajax({
            url: "/admin",
            type: "get",
            dataType: "json",
            // async: false,
            success: function (result) {
                // console.log(result);
                var data = result.data;
                var content = '';
                for (var i = 0; i < data.length; i++) {
                    content += '<tr class="text-c">';
                    content += '<td><input type="checkbox" value="1" name=""></td>';
                    content += '<td>' + data[i].id + '</td>';
                    content += '<td>' + data[i].username + '</td>';
                    content += '<td class="f-14 admin-manage"></a><a title="编辑" href="javascript:;" onClick="admin_edit(\'800\',\'750\',\'管理员编辑\',\'/admin/toUpdate/' + data[i].id + '\')" class="ml-5" style="text-decoration:none">';
                    content += '<i class="icon-edit"></i></a> <a title="删除" href="javascript:;" onClick="admin_del(this,' + data[i].id + ')"><i class="icon-trash"></i></a></td>';
                    content += '</tr>';
                    // content += '<td>超级管理员</td>';
                }
                $("#admin_info").html(content);
            },
            error: function (e) {
                console.log(e);
                toastr.error("系统异常");
            }
        })
    }

    function admin_edit(w, h, title, url) {
        layer_show(w, h, title, url);
    }

    function admin_add() {
        var roleId = $("#roleId option:checked").val();       //获取下拉框的value
        // console.log(rids);
        // console.log($("#username").val());
        var admin = {
            "username": $("#username").val(),
        }
        var j_admin = JSON.stringify(admin);
        // console.log(j_admin);
        $.ajax({
            url: "/admin?rid=" + roleId,
            type: "post",
            dataType: "json",
            data: j_admin,
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {
                // console.log(result);
                if (result.code == 200) {
                    toastr.success("操作成功,默认密码为1234");
                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                } else {
                    toastr.success("系统异常");
                }
            },
            error: function (e) {
                console.log(e);
                toastr.error("系统异常");
            }
        })
    }

    function admin_del(obj, id) {
        layer.confirm('确认要删除🐎？', function (index) {
            // $(obj).parents("tr").remove();
            $.ajax({
                url: "/admin/" + id,
                dataType: "json",
                type: "delete",
                success: function (result) {
                    if (result.code == 200){
                        toastr.success("删除成功了!");
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    } else{
                        toastr.success("异常");
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                },
                error: function (e) {
                    console.log(e);
                    toastr.error("系统异常");
                }
            })
            layer.msg('已删除!', 1);
        });
    }

</script>
</html>